<template>
  <div>
    <van-nav-bar title="会员登录" left-arrow />
    <div class="main">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <van-form validate-first @submit="submit">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="mobile"
          name="mobile"
          placeholder="请输入手机号码"
          :rules="[
            {
              pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
              message: '请输入11手机号',
            },
          ]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <div class="item">
          <van-field
            v-model="captchaCode"
            name="captchaCode"
            placeholder="请输入图形验证码"
            :rules="[
              {
                pattern: /^\w{4,4}$/,
                message: '请输入四位图形验证码',
              },
            ]"
          />
          <img :src="pic" alt="" @click="replaceImg" />
        </div>

        <!-- 通过 validator 进行异步函数校验 -->
        <!-- <div class="item"> -->
        <van-field v-model="phone" placeholder="请输入短信验证码">
          <template #button>
            <button class="verify" @click="verifyLogin">获取验证码</button>
          </template>
        </van-field>
        <!-- </div> -->

        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="submit"
            color="linear-gradient(to right, #ecb53c, #ff9211)"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { imgLogin, loginYes, verifyLogin } from "@/api/login";
export default {
  data() {
    return {
      pic: "",
      mobile: "",
      captchaCode: "",
      phone: "",
      captchaKey: "",
    };
  },
  methods: {
    async submit() {
      const res = await loginYes({ smsCode: this.phone, mobile: this.mobile });
      console.log(res);
      if (res.status === 200) {
        this.$router.push("/indexx");
      }
    },
    async replaceImg() {
      const res = await imgLogin();
      this.pic = res.data.base64;
      this.captchaKey = res.data.key;
    },
    async verifyLogin() {
      // 图片验证码校验
      await verifyLogin({
        captchaCode: this.captchaCode,
        captchaKey: this.captchaKey,
        mobile: this.mobile,
      });
    },
  },
  async created() {
    const res = await imgLogin();
    this.pic = res.data.base64;
    this.captchaKey = res.data.key;
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 13.3333vw 8vw 0;
  .title {
    margin-bottom: 8vw;
    h3 {
      margin-bottom: 2.1333vw;
      color: #191919;
      font-size: 7.2vw;
      font-weight: normal;
    }
    p {
      color: #b3b3b3;
      font-size: 3.7333vw;
    }
  }
  .item {
    display: flex;
    height: 12.8vw;
    padding-top: 2.4vw;
    margin-bottom: 4vw;
    border-bottom: 1px solid #f3f1f2;
    img {
      width: 25.6vw;
      height: 7.7867vw;
    }
  }
  .verify {
    font-size: 3.7333vw;
    color: #cea26a;
    border: 0;
    background-color: #fff;
  }
}
</style>
